<template>
  <div class="dashboard-container">
    <div class="dashboard-text" />
    <div class="one">
      <div class="oneone">
        <div class="oneoneone">
          <span class="oool">总数量答题</span>
          <span id="ooor" class="el-icon-warning" />
        </div>
        <div class="oneonetwo">
          <div class="oooo">260,560</div>
          <span class="ooooo">周同比 12%</span>
          <span class="el-icon-caret-top" />
          <span class="ooooo"> 日环比 11%</span>
          <span class="el-icon-caret-bottom" />
        </div>
        <div class="oneonethree">日答题数量 12,423</div>
      </div>
      <div class="oneone">
        <div class="oneoneone">
          <span class="oool">试题方向</span>
          <span id="ooor" class="el-icon-warning" />
        </div>
        <div class="oneonetwo"><radar /></div>
        <div class="oneonethree">试题库数量 10,234</div>
      </div>
      <div class="oneone">
        <div class="oneoneone">
          <span class="oool">试题学科分布</span>
          <span id="ooor" class="el-icon-warning" />
        </div>
        <div class="oneonetwo"><grid /></div>
        <div class="oneonethree">前端试题数量 5,234</div>
      </div>
      <div class="oneone">
        <div class="oneoneone">
          <span class="oool">上周试题新增</span>
          <span id="ooor" class="el-icon-warning" />
        </div>
        <div class="oneonetwo"><three /></div>
        <div class="oneonethree">
          上周新增总量 1,234 <span class="el-icon-caret-top" />
        </div>
      </div>
    </div>
    <dierhang />
    <div class="three">
      <div class="threeone">
        <span class="threeonel">线上热门搜索</span>
        <span class="threeoner"><threes /></span>
      </div>
      <div class="threetwo"><liebiao /><anniu /></div>
    </div>
    <div class="three">
      <div class="threeone">
        <span class="threeonel">销售额类别占比</span>
        <span class="threeoner"><threes /></span>
      </div>
      <div class="threetwo"><bingtu /></div>
    </div>
    <div id="four" class="three">
      <div class="threeone">
        <span class="threeonel">周搜索趋势</span>
        <span class="threeoner"><threes /></span>
      </div>
      <div class="threetwo"><threess /></div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapState } from 'vuex'
import radar from '@/views/dashboard/radar.vue'
import grid from '@/views/dashboard/grid.vue'
import three from '@/views/dashboard/three.vue'
import dierhang from '@/views/dashboard/dierhang.vue'
import threes from '@/views/dashboard/xiala.vue'
import liebiao from '@/views/dashboard/liebiao.vue'
import anniu from '@/views/dashboard/anniu.vue'
import bingtu from '@/views/dashboard/bingtu.vue'
import threess from '@/views/dashboard/threess.vue'

export default {
  name: 'Dashboard',
  components: {
    threess,
    radar,
    grid,
    three,
    dierhang,
    threes,
    liebiao,
    anniu,
    bingtu
  },
  computed: {
    ...mapGetters([
      'name'
    ]),
    ...mapState('user', ['userInfo'])
  },
  methods: {

  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 1.25rem;
  }
  &-text {
    font-size: 1.875rem;
    line-height: 2.875rem;
  }
}
.one {
  height: 12.5rem;
}
.oneone {
  float: left;
  width: 25%;
  padding: 0 0.625rem;
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  .one {
    width: 100%;
  }
}
@media screen and (max-width: 768px) {
  .oneone {
    width: 100%;
  }
  .two {
    width: 100%;
    float: left;
  }
  .biaoge {
    width: 100%;
    float: left;
  }
  .three {
    width: 100%;
  }
}
.oneoneone {
  height: 1.25rem;
}
.oneoneone span:nth-child(1) {
  float: left;
  color: #97a8be;
  font-size: 0.875rem;
}
.oneoneone span:nth-child(2) {
  float: right;
}
.oneonetwo {
  height: 8.125rem;
  width: 100%;
}
.oneonethree {
  height: 2.5rem;
  border-top: 0.0625rem solid #e8e8e8;
  line-height: 2.5rem;
  font-size: 0.875rem;
}
.oooo {
  height: 6.875rem;
  font-size: 1.25rem;
  line-height: 6.875rem;
  padding-left: 1.25rem;
}
.ooooo {
  font-size: 0.875rem;
}
.twoone {
  height: 1.5625rem;
  margin-top: 0.9375rem;
}
.el-tabs__content {
  width: 100%;
}
.three {
  width: 38rem;
  float: left;
  margin: 0 0.375rem;
}
.threeone {
  // width: 35rem;
  height: 3.4375rem;
  border-bottom: 0.0625rem solid #e8e8e8;
  line-height: 3.4375rem;
  color: #99aac0;
  font-size: 0.875rem;
  padding-left: 0.9375rem;
}
.threetwo {
  // width: 35rem;
  height: 20rem;
  // background-color: skyblue;
  padding-left: 0.9375rem;
}
.threeone span:nth-child(2) {
  margin-left: 31.25rem;
}
#four {
  width: 1440px;
}
#four .threeone {
  width: 88.75rem;
}
#four .threeone .threeonel {
  margin-right: 47.5rem;
}
</style>
